<template>
  <div id="app">
    <van-nav-bar title="首页" fixed>
      <template #left>
        <van-icon @click="showMenuPannel" name="wap-nav" size="18" />
      </template>
      <template #right>
        <van-icon @click="showSearchBar" name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
      ><menu-page @closeMenu="closeMenuPanel"
    /></van-popup>
    <div v-show="isShowSearchBar">
      <form action="/" class="searchBox">
        <van-search
          v-model="searchKey"
          show-action
          placeholder="请输入搜索关键词,作者名或者标题"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <router-view />
  </div>
</template>
<script>
import MenuPage from './views/menu/Menu.vue'
import LocalCache from './utils/localCache'
import { mapActions } from 'vuex'
export default {
  components: {
    MenuPage
  },
  data() {
    return {
      show: false,
      isShowSearchBar: false,
      searchKey: ''
    }
  },
  mounted() {
    if (LocalCache.getLocalCache('miBlogToken')) {
      this.$store.commit('isLogin')
    }
  },
  methods: {
    ...mapActions(['getSearchMomentList']),
    showMenuPannel() {
      this.show = true
    },
    closeMenuPanel() {
      this.show = false
    },
    showSearchBar() {
      this.isShowSearchBar = !this.isShowSearchBar
    },
    async onSearch(val) {
      console.log(val)
      await this.getSearchMomentList(val)
      this.searchKey = ''
      this.$router.push(`/searchlist/${val}`)
    },
    onCancel() {
      this.isShowSearchBar = false
    }
  }
}
</script>

<style lang="less">
.searchBar {
  height: 54px;
}
.searchBox {
  position: fixed;
  width: 100%;
  top: 46px;
  z-index: 100;
}
.van-search__content {
  padding-left: 10px;
}
</style>
